<style lang="scss" scoped>
    .mint-popup-right {
        width: 100%;
        height: 100%;
        z-index: 10001!important;
        background: #FCFCFC;
    }
    .avatar {
        margin: .24rem .1rem;
    }
    #takePhoto {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
    }
</style>

<template>
    <mt-popup
        v-model="visible"
        :modal="false"
        position="right">
        <mt-header fixed title="添加救生员">
            <mt-button icon="back" slot="left" @click="visible = false"></mt-button>
        </mt-header>
        <div class="base-info-area">
            <mt-field readonly label="编辑头像">
                <label class="avatar" for="takePhoto" role="button">
                    <img v-show="!show" src="~assets/img/avator.png" alt="placer">
                    <div v-show="show" class="preview" :style="'backgroundImage:url('+headerImage+')'"></div>
                    <input type="file" @change="onFileChange" id="takePhoto" accept="image/*">
                </label>
            </mt-field>
            <mt-field disableClear label="姓名" placeholder="请输入姓名"></mt-field>
            <mt-field disableClear label="联系电话" placeholder="请输入手机号码"></mt-field>
        </div>
        <mt-header class="fixed-bt" title="确定"></mt-header>
    </mt-popup>
</template>

<script type="text/babel">
    import { upload } from '@/utils/index.js'

    export default {
        props: {
            value: Boolean
        },
        data() {
            return {
                visible: this.value,
                //提交请求用的表单数据
                picValue: '',
                //预览显示用的src
                headerImage: '',
                //显示上传的头像
                show: false 
            };  
        },       
        watch: {
            value(current) {
                this.visible = current;
            },
            visible(current) {
                this.$emit('input', current)
            }
        },
        methods: {  
            onFileChange(e) {
                upload(e, this)
            }
        },
    };
</script>